<template>
	<view class="content">
		<!-- 头部消息 -->
		<view class="msg-view">
			<text>{{ hoursTip }}好！{{ user }}先生</text>
			<view class="msg-icon">
				<uni-badge :text="value" absolute="rightTop" :offset="[6, 16]" size="normal">
					<view class="box"><uni-icons type="notification" size="30" color="#79bf01"></uni-icons></view>
				</uni-badge>
			</view>
		</view>
		<!-- banner图 -->
		<view class="uni-padding-wrap">
			<view class="page-section swiper">
				<view class="page-section-spacing">
						<swiper class="swiper" circular="true" indicator-dots="true" autoplay="true" indicator-color="rgba(0, 0, 0, .3)" indicator-active-color="#75b503" interval="3500" duration="600">
							<swiper-item class="swiper-list" v-for="(item, index) in bannerList" :key="index">
								<view class="swiper-item uni-bg-green"><image class="swiper-img" :src="item.imageUrl" mode="scaleToFill"></image></view>
							</swiper-item>
						</swiper>
				</view>
			</view>
		</view>
		<!-- 功能12345 -->
		<view class="menu">
			<block v-for="(item, index) in menuList1" :key="index">
				<view class="menu-item">
					<image :src="item.img" mode="widthFix"></image>
					<text>{{ item.title }}</text>
				</view>
			</block>
		</view>
		<!-- 功能菜单-->
		<view class="menu-box">
			<block v-for="(item, index) in menuList2" :key="index" >
				<view class="menu-box-item" @click='openToast(item)'>
					<image :src="item.img" mode="widthFix"></image>
					<text>{{ item.title }}</text>
				</view>
			</block>
		</view>
		<!-- 功能子菜单 -->
		<view class='mask' :hidden="menuHidden" @click="closePopup">
			<view  class="popup_content">
				<view class="title">{{maskTitle}}</view>
					<view class='menu-list menu-box'>
						<view class='menu-box-item poput-content-item' v-for="(item,index) in maskList" :key='index' @click="toNewPage(item)">
						<image :src="item.img" mode="widthFix"></image>
						<text>{{ item.title }}</text>
						</view>
					</view>
				</view>
		</view>
		
		<zdy-tabbar :current-page="0"></zdy-tabbar>
	</view>
</template>

<script>
export default {
	data() {
		return {
			user: '张三',
			value: 77,
			// 功能子菜单 默认隐藏
			menuHidden:true,
			maskTitle:'',
			maskList:[],
			bannerList: [
				{
					imageUrl: 'https://cdn.zhoukaiwen.com/zjx_banner.png'
				},
				{
					imageUrl: 'https://cdn.zhoukaiwen.com/zjx_banner3.png'
				},
				{
					imageUrl: 'https://cdn.zhoukaiwen.com/zjx_banner1.png'
				},
				{
					imageUrl: 'https://cdn.zhoukaiwen.com/zjx_banner2.png'
				},
				{
					imageUrl: 'https://cdn.zhoukaiwen.com/zjx_banner3.png'
				}
			],
			menuList1: [
				{
					img: require('../../static/inster/meishi.png'),
					title: '功能1'
				},
				{
					img: require('../../static/inster/meishi.png'),
					title: '功能2',
					
				},
				{
					img: require('../../static/inster/meishi.png'),
					title: '功能3'
				},
				{
					img: require('../../static/inster/meishi.png'),
					title: '功能4'
				},
				{
					img: require('../../static/inster/meishi.png'),
					title: '功能5'
				}
			],
			menuList2: [
				{
					img: require('../../static/inster/meishi.png'),
					title: '功能A'
				},
				{
					img: require('../../static/inster/meishi.png'),
					title: '功能B',
					litter:[
						{
							img: require('../../static/inster/meishi.png'),
							title: '功能1'
						},	{
							img: require('../../static/inster/meishi.png'),
							title: '功能1'
						},	{
							img: require('../../static/inster/meishi.png'),
							title: '功能1'
						},
						{
							img: require('../../static/inster/meishi.png'),
							title: '功能1'
						},	{
							img: require('../../static/inster/meishi.png'),
							title: '功能1'
						},	{
							img: require('../../static/inster/meishi.png'),
							title: '功能1'
						},
						{
							img: require('../../static/inster/meishi.png'),
							title: '功能1'
						},	{
							img: require('../../static/inster/meishi.png'),
							title: '功能1'
						},	{
							img: require('../../static/inster/meishi.png'),
							title: '功能1'
						},
						{
							img: require('../../static/inster/meishi.png'),
							title: '功能10'
						},
					]
				},
				{
					img: require('../../static/inster/meishi.png'),
					title: '功能C'
				},
				{
					img: require('../../static/inster/meishi.png'),
					title: '功能D'
				},
				{
					img: require('../../static/inster/meishi.png'),
					title: '功能E'
				},{
					img: require('../../static/inster/meishi.png'),
					title: '功能F'
				},{
					img: require('../../static/inster/meishi.png'),
					title: '功能G'
				},{
					img: require('../../static/inster/meishi.png'),
					title: '功能H'
				},{
					img: require('../../static/inster/meishi.png'),
					title: '功能I'
				},{
					img: require('../../static/inster/meishi.png'),
					title: '功能J'
				},
				{

				},
				{

				}
			]
		};
	},
	onLoad() {},
	computed: {
		// 获取时间段
		hoursTip: function() {
			let newDate = new Date().getTime();
			let h = new Date(newDate).getHours();
			// console.log(h)
			if (h >= 0 && h < 12) {
				h = '上午';
			} else if (h >= 12 && h < 18) {
				h = '下午';
			} else {
				h = '晚上';
			}
			return h;
		}
	},
	methods: {
		openToast(menu){
			console.log(menu)
			if(menu.litter && menu.litter.length>0){
				// 显示子菜单
				this.menuHidden = false
				this.maskTitle = menu.title
				this.maskList = menu.litter
			}else{

			}
		},
		// 关闭弹框
		closePopup(){
			this.menuHidden = true
		},
		// 跳转到新功能页
		toNewPage(page){
			// uni.reLaunch({
			// 	url:item.url
			// })
			console.log('跳转到对应功能页')
			this.menuHidden = true
		}
	}
};
</script>

<style>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #f1f1f1;
	padding-bottom:120rpx;
}
.msg-view {
	position: relative;
	width: 100%;
	height: 120rpx;
	line-height: 120rpx;
	color: #75b503;
	font-size: 40rpx;
	text-align: center;
	background-color: #272a3b;
}
.msg-view .msg-icon {
	position: absolute;
	width: 80rpx;
	height: 80rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	right: 20rpx;
	top: 20rpx;
}
.swiper-box {
	flex: 1;
}

.swiper {
	width: 100%;
	height: 300rpx;
}
.swiper-item {
	display: block;
	width: 100%;
	height: 300rpx;
	line-height: 300rpx;
	text-align: center;
}
.swiper-item image {
	width: 100%;
	height: 100%;
}
.swiper-list {
	/* margin-top: 40rpx; */
	margin-bottom: 0;
}
.indicator-dots {
	display: flex;
	justify-content: center;
}


.uni-common-mt {
	margin-top: 60rpx;
	position: relative;
}
.info {
	position: absolute;
	right: 20rpx;
}
.uni-padding-wrap {
	width: 100%;
	/* padding: 0 100rpx; */
}
.logo {
	height: 200rpx;
	width: 200rpx;
	margin-top: 200rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50rpx;
}

.text-area {
	display: flex;
	justify-content: center;
}

.title {
	font-size: 36rpx;
	color: #8f8f94;
}
/* 菜单12345 */
.menu {
	width: 100%;
	height: 160rpx;
	background-color: #272a3b;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-around;
}
.menu-item {
	/* width: 20%; */
	text-align: center;
	height: 160rpx;
	padding-top:8rpx;
	color: #fff;
	font-size: 26rpx;
}
.menu-item image {
	width: 80rpx;
	height: 80rpx;
	margin: 12rpx 12rpx 4rpx 12rpx;
}
.menu-item text {
	display: block;
	/* font-size: 40rpx; */
}
/* 菜单导航 */
.menu-box {
	border-top:2rpx solid #f1f1f1;
	margin-top:20rpx;
	margin-bottom:40rpx;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	text-align: center;
}
.menu-box-item {
	box-sizing: border-box;
	width: 25%;
	height:220rpx;
		border-right:2rpx solid #f1f1f1;
		border-bottom:2rpx solid #f1f1f1;
	background-color: #fff;
	display: flex;
	flex-direction: column;
		align-items: center;
	justify-content: space-around;
}
.poput-content-item {
	border:0;
	background-color: #f1f1f1;
}
.menu-box-item image {
	width: 120rpx;
	height:120rpx;
	border-radius:60rpx;
}
.menu-box-item text {
	display: block;
	font-size: 28rpx;
}
/* 菜单弹框 */

	.mask {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.4);
		padding:0 20rpx;
	}
.popup_content {
	position:absolute;
	top:50%;
	transform: translateY(-50%);
	width: 96%;
	height: 800rpx;
	border-radius:20rpx;
	background-color: #f1f1f1;
		
}
.popup_content .title{
height:80rpx;
line-height: 80rpx;
text-align: center;
color:#88c002;
margin-top:-2rpx;
border-radius:20rpx 20rpx 0 0;
background-color: #272a3b;
font-size: 40rpx;
}

</style>
